$(function () {
    // ### 全部变量
 
    // ### 和后端交互

    // ### 门店放大镜切换
    $('.store .d-right ul').on('click', 'li', function () {
        $('.big .imgbox img').attr('src', $(this).find('img').attr('src'))
    })

    // ### 飞入购物车 start
    $('.allgoods').on('click', '.buy', function (e) {
        let uname=localStorage.getItem('uname') || sessionStorage.getItem('uname')
        if(!uname) return
        // 收集数据
        let endObj = document.querySelector('.guess-you-like h4')
        let goods_img = $(this)
            .parents('.goods')
            .find('.imgbox img')
            .attr('src')
        let goods_name = $(this).parents('.goods').find('.name span').text()
        let goods_price = $(this).parents('.goods').find('.price font').text()
        let goods_price2 = $(this).parents('.goods').find('.price span').text()
        let goods_id = $(this).parents('.goods').attr('id')
        console.log('a',goods_id);
        // 飞图片
        let flyer = $(`<img class="flyer" src="${goods_img}"/>`)
        // 起飞
        flyer.fly({
            start: {
                left: e.clientX - 788,
                top: e.clientY,
            },
            end: {
                left: endObj.offsetLeft,
                top: endObj.offsetTop - document.documentElement.scrollTop,
                width: 20,
                height: 20,
            },
            onEnd: () => {
                // alert('ok')
                $('.flyer').remove()

                if ($('.mofakoudai').find(`.goods${goods_id}`).length) {
                    // 累计+1
                    console.log(1)
                    let data = $('.mofakoudai')
                        .find(`.goods${goods_id} button font`)
                        .text()
                        // console.log(data);
                    $('.mofakoudai')
                        .find(`.goods${goods_id} button font`)
                        .text(parseInt(data) + 1)
                } else {
                    // 新增
                    // console.log(1)
                    $('.mofakoudai').prepend(`
                  <li class="goods${goods_id}">
                      <div class="pic">
                          <div class="imgbox">
                              <img src="${goods_img}">
                          </div>
                      </div>
                      <p class="name">${goods_name}</p>
                      <p class="desc">门市价<del>￥${goods_price2}</del></p>
                      <p class="price"><b>￥</b>${goods_price} <button>已购<font>1</font></button></p>
                  </li>
              `)
                }
            },
        })
    })
    // 飞入购物车 end
})




let store_id=getQueryVariable('store_id')
    // console.log(store_id);
    //门店商品
    $.get('/api/waimai/goods.jsp',{store_id},res=>{
      // console.log(res);
      if(res.meta.state==200){
        // console.log(res.data);
        $('.store .name').text(res.data.store.title);
        $('.store .address').html(`<p>
                地址：${res.data.store.address}
              </p>
              <p>
                电话：${res.data.store.tel}
              </p>
              <p>
                营业时间：${res.data.store.work_time}
              </p>`)
        $('.big .imgbox img').attr('src','http://tmp00001.zhaodashen.cn/'+res.data.store.img)
        let html=''
        res.data.store.imgs.split(',').forEach(item => {
            html+=`<li>
                <div class="imgbox" style="height: 100%; width: 100%;"><img
                    src="http://tmp00001.zhaodashen.cn/${item}" />
                </div>
              </li>
              `
        });
        $('.store .d-right ul').html(html)

        //门店商品列表
        $('.allgoods').html('<h4>欢迎光临O(∩_∩)O哈哈~ 客官</h4>')
        $.each(res.data.goods,(i,item)=>{
          let html=`<div class="goods" id="${item.goods_id}">
                  <div class="one clear">
                    <div class="pic">
                      <div class="imgbox">
                        <img
                          src="http://tmp00001.zhaodashen.cn/${item.goods_img}">
                      </div>
                    </div>
                    <div class="info">
                      <a class="fr buy" href="javascript:;">加入购物车</a>
                      <p class="name"><span>${item.goods_name}</span></p>
                      <p class="price">
                        <b>￥</b>
                        <font>2</font><span>门市价￥${item.shop_price}</span>
                      </p>
                    </div>
                  </div>
                  <div class="line"></div>
                </div>`
                $('.allgoods').append(html)
        })

      }else{
        
        cocoMessage.error('门店不存在');
      }
    },'json')


     // console.log(store_id);
    // console.log(token);
    // console.log(uname);
    //加入购物车
    $('.allgoods').on('click','.buy',function(){
      if(!token){
        
        cocoMessage.error('请先登录');
        return
      }

      let goodsId=$(this).parents('.goods').attr('id')
      $.post('/api/carts/create.jsp',{token,buyNum:1,goodsId},res=>{
        console.log(res);
        if(res.meta.state!=201){
          
        cocoMessage.error(res.meta.msg);
        return
        }
      },'json')
    })


    //门店购物车 进入页面立即请求接口
    $('.mofakoudai').text('') //清空

    $.get('/api/carts/store.jsp',{token,store_id},res=>{
      $.each(res.data,(i,item)=>{
        let html=`<li class='goods${item.goods_id}'>
                  <div class="pic">
                    <div class="imgbox">
                      <img
                        src="http://tmp00001.zhaodashen.cn/${item.imgs.goods_img}">
                    </div>
                  </div>
                  <p class="name">${item.goods_name}</p>
                  <p class="desc">门市价<del>￥${item.market_price}</del></p>
                  <p class="price"><b>￥</b>${item.shop_price}<button>已购<font>${item.goods_number}</font></button></p>
                </li>`
          $('.mofakoudai').append(html)
      })
    },'json')